<template>
  <div
    id="subscribe"
    class="main-div"
    v-loading="multicastLoading"
  >
    <div class="my-breadcrumb-div">
      <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
      <el-breadcrumb
        class="my-breadcrumb-padding"
        separator="/"
      >
        <el-breadcrumb-item>
          配置
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          组播
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-row
      style="height: calc(100% - 60px)"
      :gutter="20"
    >
      <el-col
        style="height: 100%"
        :span="14"
      >
        <el-card style="height: 100%">
          <div
            class="card-header-div"
            style="float: none"
          >
            组播
            <el-button
              @click="handleMulticastCreate"
              style="padding: 0 0 0 5px"
              type="text"
            >
              <i
                class="el-icon-plus"
                style="font-weight: bold"
              />
            </el-button>
          </div>
          <el-table
            style="margin-top: 10px"
            height="calc(100% - 3em)"
            @row-click="handleMulticastSpeakerClick"
            highlight-current-row
            :data="multicastTable"
            class="table-gutter-background"
            header-cell-class-name="my-table-header-cell"
            cell-class-name="my-table-cell"
          >
            <el-table-column
              label="更多"
              type="expand"
            >
              <template slot-scope="props">
                <div style="width: 100%">
                  <div style="display: inline-block;width: 100%">
                    <el-form
                      inline
                      label-width="110px"
                    >
                      <el-form-item class="multicast-expand-form-item">
                        <span
                          class="multicast-expand-form-label"
                          slot="label"
                        >
                          卫星
                        </span>
                        <span>{{ props.row.satellite_name }}</span>
                      </el-form-item>
                      <el-form-item class="multicast-expand-form-item">
                        <span
                          class="multicast-expand-form-label"
                          slot="label"
                        >
                          上行波束
                        </span>
                        <span>{{ props.row.send_beam_name }}</span>
                      </el-form-item>
                      <el-form-item class="multicast-expand-form-item">
                        <span
                          class="multicast-expand-form-label"
                          slot="label"
                        >
                          下行波束
                        </span>
                        <span>{{ props.row.receive_beam_name }}</span>
                      </el-form-item>
                      <el-form-item class="multicast-expand-form-item">
                        <span
                          class="multicast-expand-form-label"
                          slot="label"
                        >
                          转发器
                        </span>
                        <span>{{ props.row.transponder_name }}</span>
                      </el-form-item>
                      <!--<el-form-item class="multicast-expand-form-item">-->
                      <!--  <span-->
                      <!--    class="multicast-expand-form-label"-->
                      <!--    slot="label"-->
                      <!--  >-->
                      <!--    上行起始频点-->
                      <!--  </span>-->
                      <!--  <span>{{ props.row.up_freq_begin }}</span>-->
                      <!--</el-form-item>-->
                      <!--<el-form-item class="multicast-expand-form-item">-->
                      <!--  <span-->
                      <!--    class="multicast-expand-form-label"-->
                      <!--    slot="label"-->
                      <!--  >-->
                      <!--    上行终止频点-->
                      <!--  </span>-->
                      <!--  <span>{{ props.row.up_freq_end }}</span>-->
                      <!--</el-form-item>-->
                      <el-form-item class="multicast-expand-form-item">
                        <span
                          class="multicast-expand-form-label"
                          slot="label"
                        >
                          下行起始频点
                        </span>
                        <span>{{ props.row.down_freq_begin }}</span>
                      </el-form-item>
                      <el-form-item class="multicast-expand-form-item">
                        <span
                          class="multicast-expand-form-label"
                          slot="label"
                        >
                          下行终止频点
                        </span>
                        <span>{{ props.row.down_freq_begin }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="主讲"
              prop="send_cu_device"
            />
            <el-table-column
              label="速率(bps)"
              prop="speed"
            />
            <el-table-column
              label="开始时间"
              prop="start_time_show"
            />
            <el-table-column
              label="结束时间"
              prop="end_time_show"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  style="padding: 0"
                  @click.stop="handleMulticastModify(scope.row)"
                  type="text"
                >
                  <img src="@/assets/common/edit.png">
                </el-button>
                <el-button
                  style="padding: 0 0 0 5px"
                  @click.stop="handleMulticastDelete(scope.row)"
                  type="text"
                >
                  <img src="@/assets/common/delete.png">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col
        style="height: 100%"
        :span="10"
      >
        <el-card style="height: 100%">
          <div
            class="card-header-div"
            style="float: none"
          >
            听众
            <el-button
              @click="handleReceiverCreate"
              style="padding: 0 0 0 5px"
              type="text"
            >
              <i
                class="el-icon-plus"
                style="font-weight: bold"
              />
            </el-button>
          </div>
          <el-table
            style="margin-top: 10px"
            height="calc(100% - 3em)"
            :data="listenersTable"
            class="table-gutter-background"
            header-cell-class-name="my-table-header-cell"
            cell-class-name="my-table-cell"
          >
            <el-table-column
              label="更多"
              type="expand"
            >
              <template slot-scope="props">
                <div style="width: 100%">
                  <div style="display: inline-block;width: 100%">
                    <el-form
                      v-if="props.row.back_pass"
                      inline
                      label-width="110px"
                    >
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          卫星
                        </span>
                        <span>{{ props.row.back_pass.satellite_name }}</span>
                      </el-form-item>
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          上行波束
                        </span>
                        <span>{{ props.row.back_pass.send_beam_name }}</span>
                      </el-form-item>
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          下行波束
                        </span>
                        <span>{{ props.row.back_pass.receive_beam_name }}</span>
                      </el-form-item>
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          转发器
                        </span>
                        <span>{{ props.row.back_pass.transponder_name }}</span>
                      </el-form-item>
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          上行起始频点
                        </span>
                        <span>{{ props.row.back_pass.up_freq_begin }}</span>
                      </el-form-item>
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          上行终止频点
                        </span>
                        <span>{{ props.row.back_pass.up_freq_end }}</span>
                      </el-form-item>
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          下行起始频点
                        </span>
                        <span>{{ props.row.back_pass.down_freq_begin }}</span>
                      </el-form-item>
                      <el-form-item class="receiver-expand-form-item">
                        <span
                          class="receiver-expand-form-label"
                          slot="label"
                        >
                          下行终止频点
                        </span>
                        <span>{{ props.row.back_pass.down_freq_end }}</span>
                      </el-form-item>
                    </el-form>
                    <div v-else>
                      暂无回传信息
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="终端编号"
              prop="receive_cu_device"
            />
            <el-table-column
              label="回传终端"
              prop="back_pass.back_pass_receiver_device"
            />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!--添加、删除回传-->
                <!--<el-button-->
                <!--  class="el-button-vertical-align-middle"-->
                <!--  size="mini"-->
                <!--  @click.stop="handleReceiverBackPass(scope.row)"-->
                <!--  :type="scope.row.back_pass ? 'danger' : 'primary'"-->
                <!--&gt;-->
                <!--  {{ scope.row.back_pass ? '删除回传' : '添加回传' }}-->
                <!--</el-button>-->
                <el-button
                  class="el-button-vertical-align-middle"
                  style="padding: 0"
                  @click.stop="handleReceiverDelete(scope.row)"
                  type="text"
                >
                  <img src="@/assets/common/delete.png">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!--dialog-->
    <div>
      <el-dialog
        v-loading="multicast.loading"
        title="添加组播"
        top="8vh"
        width="950px"
        :close-on-click-modal="false"
        @closed="handleMulticastClosed"
        :visible.sync="multicast.visible"
      >
        <el-steps
          :active="multicast.step"
          align-center
        >
          <el-step title="步骤1" />
          <el-step title="步骤2" />
          <el-step title="步骤3" />
        </el-steps>
        <div class="multicast-dialog-div-content">
          <div
            class="multicast-dialog-div-content-item1 background-color-base"
            style="margin-right: 20px;box-sizing: border-box"
          >
            <div class="multicast-dialog-form-header-container">
              <div class="multicast-dialog-form-header">
                <span>当前信息:</span>
              </div>
            </div>
            <el-form
              style="height: 400px"
              class="demo-ruleform"
              label-width="120px"
            >
              <el-form-item label="主讲:">
                <span>{{ multicast.form.speakerSelect ? multicast.form.speakerSelect.device : '' }}</span>
              </el-form-item>
              <el-form-item
                class="no-margin-bottom"
                label="开始时间:"
                prop="start_time"
              >
                <el-date-picker
                  v-if="multicast.step === 0"
                  size="mini"
                  style="width: 180px"
                  type="datetime"
                  v-model="multicast.form.start_time_picker"
                />
                <span v-else>
                  {{ multicast.form.start_time_show }}
                </span>
              </el-form-item>
              <el-form-item
                class="no-margin-bottom"
                label="结束时间:"
                prop="end_time"
              >
                <el-date-picker
                  v-if="multicast.step === 0"
                  size="mini"
                  style="width: 180px"
                  type="datetime"
                  v-model="multicast.form.end_time_picker"
                />
                <span v-else>
                  {{ multicast.form.end_time_show }}
                </span>
              </el-form-item>
            </el-form>
          </div>
          <div class="multicast-dialog-div-content-item2">
            <div
              v-if="multicast.step === 0"
              style="padding-top: 20px"
            >
              <el-tree
                default-expand-all
                show-checkbox
                check-strictly
                node-key="node_key"
                ref="selectDeptTree"
                @check-change="handleSpeakerCheckChange"
                style="border-radius: 6px;height: 400px;overflow: auto"
                :data="deptTreeForSelectCu"
                :props="deptTreeProps"
              >
                <span
                  style="flex: 1"
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                >
                  <span v-if="data.node_type === 'root'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/qw.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'dept'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/dq.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'station'">
                    <img
                      v-if="data.kind === 0"
                      class="tree-node-img"
                      src="@/assets/config/remote/tx.png"
                    >
                    <img
                      v-else-if="data.kind === 1"
                      class="tree-node-img"
                      src="@/assets/config/remote/bx.png"
                    >
                    <img
                      v-else-if="data.kind === 2"
                      class="tree-node-img"
                      src="@/assets/config/remote/che.png"
                    >
                    <img
                      v-else-if="data.kind === 3"
                      class="tree-node-img"
                      src="@/assets/config/remote/cz.png"
                    >
                    <img
                      v-else-if="data.kind === 4"
                      class="tree-node-img"
                      src="@/assets/config/remote/fj.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else>
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/cu.png"
                    >
                    {{ data.name }}
                  </span>
                </span>
              </el-tree>
            </div>
            <div
              v-if="multicast.step === 1"
              style="padding-top: 20px"
            >
              <el-form
                ref="multicastStep1Form"
                class="demo-ruleform"
                :model="multicast.form"
                :rules="multicast.multicastStep1FormRules"
                label-width="120px"
                size="mini"
              >
                <el-form-item
                  label="卫星"
                  prop="satellite"
                >
                  <el-select
                    @change="handleMulticastSatelliteChange"
                    v-model="multicast.form.satellite"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in multicast.satelliteOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="上行波束"
                  prop="up_beam"
                >
                  <el-select
                    v-model="multicast.form.up_beam"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in multicast.beamOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="下行波束"
                  prop="down_beam"
                >
                  <el-select
                    v-model="multicast.form.down_beam"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in multicast.beamOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="速率"
                  prop="speed"
                >
                  <el-select
                    v-model="multicast.form.speed"
                    value-key="key"
                  >
                    <el-option
                      v-for="item in multicast.speedOption"
                      :key="item.key"
                      :label="item.label"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div
              v-if="multicast.step === 2"
              style="padding-top: 20px"
            >
              <el-form
                ref="multicastStep2Form"
                class="demo-ruleform"
                :model="multicast.form"
                :rules="multicast.multicastStep2FormRules"
                label-width="120px"
                size="mini"
              >
                <el-form-item
                  label="转发器"
                  prop="transponder"
                >
                  <el-select
                    @change="handleMulticastTransponderChange"
                    v-model="multicast.form.transponder"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in multicast.transponderOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="频率段"
                  prop="freq_segment"
                >
                  <el-select
                    @change="handleMulticastFreqSegmentChange"
                    v-model="multicast.form.freq_segment"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in multicast.freq_segmentOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <!--<el-form-item-->
                <!--  label="上行起始频点"-->
                <!--  prop="up_freq_begin"-->
                <!--&gt;-->
                <!--  <el-input v-model="multicast.form.up_freq_begin">-->
                <!--    <template slot="append">-->
                <!--      Hz-->
                <!--    </template>-->
                <!--  </el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item-->
                <!--  label="上行终止频点"-->
                <!--  prop="up_freq_end"-->
                <!--&gt;-->
                <!--  <el-input v-model="multicast.form.up_freq_end">-->
                <!--    <template slot="append">-->
                <!--      Hz-->
                <!--    </template>-->
                <!--  </el-input>-->
                <!--</el-form-item>-->
                <el-form-item
                  label="下行起始频点"
                  prop="down_freq_begin"
                >
                  <el-input v-model="multicast.form.down_freq_begin">
                    <template slot="append">
                      Hz
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="下行终止频点"
                  prop="down_freq_end"
                >
                  <el-input v-model="multicast.form.down_freq_end">
                    <template slot="append">
                      Hz
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="功率"
                  prop="power"
                >
                  <el-input v-model="multicast.form.power">
                    <template slot="append">
                      dB
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div slot="footer">
          <el-button
            v-if="multicast.step > 0"
            @click="handleMulticastStepChange('previous')"
          >
            上一步
          </el-button>
          <el-button
            v-if="multicast.step < 2"
            :loading="multicast.nextButtonLoading"
            @click="handleMulticastStepChange('next')"
            type="primary"
          >
            下一步
          </el-button>
          <el-button
            v-if="multicast.step === 2"
            :loading="multicast.submitButtonLoading"
            @click="submitForm('multicastForm')"
            type="primary"
          >
            确定
          </el-button>
        </div>
      </el-dialog>
      <el-dialog
        v-loading="receiver.loading"
        title="添加听众"
        top="8vh"
        width="950px"
        @closed="handleReceiverClosed"
        :visible.sync="receiver.visible"
      >
        <div class="multicast-dialog-div-content">
          <div
            class="multicast-dialog-div-content-item1 background-color-base"
            style="margin-right: 20px;box-sizing: border-box"
          >
            <el-form
              :model="receiver.form"
              style="height: 400px;overflow: auto;"
              class="demo-ruleform"
              label-width="120px"
            >
              <el-form-item
                class="multicast-dialog-form-header-container"
                label="主讲:"
              >
                <div class="multicast-dialog-form-header">
                  <span>{{ receiver.multicastFreqSegment ? receiver.multicastFreqSegment.send_cu_device : '' }}</span>
                </div>
              </el-form-item>
              <el-form-item
                v-for="(item, index) in receiver.form.receivers"
                :key="item.id"
                class="no-margin-bottom"
                :label="`听众${index + 1}:`"
              >
                <span>
                  {{ item.device }}
                </span>
              </el-form-item>
            </el-form>
          </div>
          <div class="multicast-dialog-div-content-item2">
            <div style="padding-top: 20px">
              <el-tree
                default-expand-all
                show-checkbox
                check-strictly
                node-key="node_key"
                ref="selectDeptTreeReceiver"
                @check-change="handleReceiverCheckChange"
                style="border-radius: 6px;height: 400px;overflow: auto"
                :data="deptTreeForSelectCu"
                :props="deptTreeReceiverProps"
              >
                <span
                  style="flex: 1"
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                >
                  <span v-if="data.node_type === 'root'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/qw.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'dept'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/dq.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'station'">
                    <img
                      v-if="data.kind === 0"
                      class="tree-node-img"
                      src="@/assets/config/remote/tx.png"
                    >
                    <img
                      v-else-if="data.kind === 1"
                      class="tree-node-img"
                      src="@/assets/config/remote/bx.png"
                    >
                    <img
                      v-else-if="data.kind === 2"
                      class="tree-node-img"
                      src="@/assets/config/remote/che.png"
                    >
                    <img
                      v-else-if="data.kind === 3"
                      class="tree-node-img"
                      src="@/assets/config/remote/cz.png"
                    >
                    <img
                      v-else-if="data.kind === 4"
                      class="tree-node-img"
                      src="@/assets/config/remote/fj.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else>
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/cu.png"
                    >
                    {{ data.name }}
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
        <div slot="footer">
          <el-button
            :loading="receiver.submitButtonLoading"
            @click="submitForm('receiverForm')"
            type="primary"
          >
            确定
          </el-button>
        </div>
      </el-dialog>
      <el-dialog
        v-loading="backPass.loading"
        title="添加回传"
        top="8vh"
        width="950px"
        :close-on-click-modal="false"
        @closed="handleBackPassClosed"
        :visible.sync="backPass.visible"
      >
        <el-steps
          :active="backPass.step"
          align-center
        >
          <el-step title="步骤1" />
          <el-step title="步骤2" />
          <el-step title="步骤3" />
        </el-steps>
        <div class="multicast-dialog-div-content">
          <div
            class="multicast-dialog-div-content-item1 background-color-base"
            style="margin-right: 20px;box-sizing: border-box"
          >
            <div class="multicast-dialog-form-header-container">
              <div class="multicast-dialog-form-header">
                <span>当前信息:</span>
              </div>
            </div>
            <el-form
              style="height: 400px"
              class="demo-ruleform"
              label-width="120px"
            >
              <el-form-item label="听众:">
                <span>{{ backPass.form.receive_cu_device }}</span>
              </el-form-item>
              <el-form-item label="回传终端:">
                <span>{{ backPass.form.back_pass_receiver ? backPass.form.back_pass_receiver.device : '' }}</span>
              </el-form-item>
            </el-form>
          </div>
          <div class="multicast-dialog-div-content-item2">
            <div
              v-if="backPass.step === 0"
              style="padding-top: 20px"
            >
              <el-tree
                default-expand-all
                show-checkbox
                check-strictly
                node-key="node_key"
                ref="selectDeptTreeBackPass"
                @check-change="handleBackPassCheckChange"
                style="border-radius: 6px;height: 400px;overflow: auto"
                :data="deptTreeForSelectCu"
                :props="deptTreeProps"
              >
                <span
                  style="flex: 1"
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                >
                  <span v-if="data.node_type === 'root'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/qw.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'dept'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/dq.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'station'">
                    <img
                      v-if="data.kind === 0"
                      class="tree-node-img"
                      src="@/assets/config/remote/tx.png"
                    >
                    <img
                      v-else-if="data.kind === 1"
                      class="tree-node-img"
                      src="@/assets/config/remote/bx.png"
                    >
                    <img
                      v-else-if="data.kind === 2"
                      class="tree-node-img"
                      src="@/assets/config/remote/che.png"
                    >
                    <img
                      v-else-if="data.kind === 3"
                      class="tree-node-img"
                      src="@/assets/config/remote/cz.png"
                    >
                    <img
                      v-else-if="data.kind === 4"
                      class="tree-node-img"
                      src="@/assets/config/remote/fj.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else>
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/cu.png"
                    >
                    {{ data.name }}
                  </span>
                </span>
              </el-tree>
            </div>
            <div
              v-if="backPass.step === 1"
              style="padding-top: 20px"
            >
              <el-form
                ref="backPassStep1Form"
                class="demo-ruleform"
                :model="backPass.form"
                :rules="backPass.backPassStep1FormRules"
                label-width="120px"
                size="mini"
              >
                <el-form-item
                  label="卫星"
                  prop="satellite"
                >
                  <el-select
                    @change="handleBackPassSatelliteChange"
                    v-model="backPass.form.satellite"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in backPass.satelliteOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="上行波束"
                  prop="up_beam"
                >
                  <el-select
                    v-model="backPass.form.up_beam"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in backPass.beamOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="下行波束"
                  prop="down_beam"
                >
                  <el-select
                    v-model="backPass.form.down_beam"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in backPass.beamOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="速率"
                  prop="speed"
                >
                  <el-select
                    v-model="backPass.form.speed"
                    value-key="key"
                  >
                    <el-option
                      v-for="item in backPass.speedOption"
                      :key="item.key"
                      :label="item.label"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div
              v-if="backPass.step === 2"
              style="padding-top: 20px"
            >
              <el-form
                ref="backPassStep2Form"
                class="demo-ruleform"
                :model="backPass.form"
                :rules="backPass.backPassStep2FormRules"
                label-width="120px"
                size="mini"
              >
                <el-form-item
                  label="转发器"
                  prop="transponder"
                >
                  <el-select
                    @change="handleBackPassTransponderChange"
                    v-model="backPass.form.transponder"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in backPass.transponderOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="频率段"
                  prop="freq_segment"
                >
                  <el-select
                    @change="handleBackPassFreqSegmentChange"
                    v-model="backPass.form.freq_segment"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in backPass.freq_segmentOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <!--<el-form-item-->
                <!--  label="上行起始频点"-->
                <!--  prop="up_freq_begin"-->
                <!--&gt;-->
                <!--  <el-input v-model="backPass.form.up_freq_begin">-->
                <!--    <template slot="append">-->
                <!--      Hz-->
                <!--    </template>-->
                <!--  </el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item-->
                <!--  label="上行终止频点"-->
                <!--  prop="up_freq_end"-->
                <!--&gt;-->
                <!--  <el-input v-model="backPass.form.up_freq_end">-->
                <!--    <template slot="append">-->
                <!--      Hz-->
                <!--    </template>-->
                <!--  </el-input>-->
                <!--</el-form-item>-->
                <el-form-item
                  label="下行起始频点"
                  prop="down_freq_begin"
                >
                  <el-input v-model="backPass.form.down_freq_begin">
                    <template slot="append">
                      Hz
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="下行终止频点"
                  prop="down_freq_end"
                >
                  <el-input v-model="backPass.form.down_freq_end">
                    <template slot="append">
                      Hz
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="功率"
                  prop="power"
                >
                  <el-input v-model="backPass.form.power">
                    <template slot="append">
                      dB
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div slot="footer">
          <el-button
            v-if="backPass.step > 0"
            @click="handleBackPassStepChange('previous')"
          >
            上一步
          </el-button>
          <el-button
            v-if="backPass.step < 2"
            :loading="backPass.nextButtonLoading"
            @click="handleBackPassStepChange('next')"
            type="primary"
          >
            下一步
          </el-button>
          <el-button
            v-if="backPass.step === 2"
            :loading="backPass.submitButtonLoading"
            @click="submitForm('backPassForm')"
            type="primary"
          >
            确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import service from '@/service/service.js'
export default {
  name: 'Muticast',
  computed: {
    multicastTable () {
      return this.$store.state.multicastFreqSegment.multicastFreqSegment.map(item => {
        return {
          ...item,
          start_time_show: service.convertTimeToShow(new Date(item.start_time)),
          end_time_show: service.convertTimeToShow(new Date(item.end_time))
        }
      })
    },
    listenersTable () {
      return this.$store.state.multicastReceiver.multicastReceiverList
    },
    deptTreeForSelectCu () {
      return this.$store.getters.deptTreeForSelectCu
    }
  },
  data () {
    return {
      multicastLoading: false,

      deptTreeProps: {
        label: 'name',
        children: 'children',
        disabled: (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else if (data.node_type === 'station') {
            return data.cus.length !== 1
          } else {
            return !node.isLeaf
          }
        }
      },
      deptTreeReceiverProps: {
        label: 'name',
        children: 'children',
        disabled: (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else if (data.node_type === 'station') {
            return data.cus.length !== 1
          } else {
            return !node.isLeaf
          }
        }
      },

      multicast: {
        visible: false,
        loading: false,
        nextButtonLoading: false,
        submitButtonLoading: false,
        step: 0,
        model: '',

        satelliteOption: [],
        beamOption: [],
        speedOption: [],
        transponderOption: [],
        freq_segmentOption: [],
        form: {
          start_time_picker: '',
          end_time_picker: '',
          start_time_show: '',
          end_time_show: '',

          speakerSelect: null,
          start_time: '',
          end_time: '',
          satellite: '',
          up_beam: '',
          down_beam: '',
          speed: '',
          transponder: '',
          freq_segment: '',
          up_freq_begin: '',
          up_freq_end: '',
          down_freq_begin: '',
          down_freq_end: '',
          power: ''
        },
        multicastStep1FormRules: {
          satellite: [
            { required: true, message: '请选择卫星', trigger: 'change' }
          ],
          up_beam: [
            { required: true, message: '请选择上行波束', trigger: 'change' }
          ],
          down_beam: [
            { required: true, message: '请选择下行波束', trigger: 'change' }
          ],
          speed: [
            { required: true, message: '请选择速率', trigger: 'change' }
          ]
        },
        multicastStep2FormRules: {
          transponder: [
            { required: true, message: '请选择转发器', trigger: 'change' }
          ],
          freq_segment: [
            { required: true, message: '请选择频率段', trigger: 'change' }
          ],
          up_freq_begin: [
            { required: true, message: '请输入上行起始频点', trigger: 'blur' }
          ],
          up_freq_end: [
            { required: true, message: '请输入上行终止频点', trigger: 'blur' }
          ],
          down_freq_begin: [
            { required: true, message: '请输入下行起始频点', trigger: 'blur' }
          ],
          down_freq_end: [
            { required: true, message: '请输入下行终止频点', trigger: 'blur' }
          ],
          power: [
            { required: true, message: '请输入功率', trigger: 'blur' }
          ]
        }
      },

      receiver: {
        visible: false,
        loading: false,
        submitButtonLoading: false,
        model: '',

        multicastFreqSegment: null,
        form: {
          receivers: []
        }
      },

      backPass: {
        visible: false,
        loading: false,
        nextButtonLoading: false,
        submitButtonLoading: false,
        step: 0,
        model: '',

        satelliteOption: [],
        beamOption: [],
        speedOption: [],
        transponderOption: [],
        freq_segmentOption: [],
        form: {
          multicast_receiver: null, // 为receiver信息的id,非cu的id
          multicast_receiver_cu: null,
          receive_cu_device: null,
          back_pass_receiver: null,

          satellite: '',
          up_beam: '',
          down_beam: '',
          transponder: '',
          speed: '',
          freq_segment: '',
          up_freq_begin: '',
          up_freq_end: '',
          down_freq_begin: '',
          down_freq_end: ''
        },
        backPassStep1FormRules: {
          satellite: [
            { required: true, message: '请选择卫星', trigger: 'change' }
          ],
          up_beam: [
            { required: true, message: '请选择上行波束', trigger: 'change' }
          ],
          down_beam: [
            { required: true, message: '请选择下行波束', trigger: 'change' }
          ],
          speed: [
            { required: true, message: '请选择速率', trigger: 'change' }
          ]
        },
        backPassStep2FormRules: {
          transponder: [
            { required: true, message: '请选择转发器', trigger: 'change' }
          ],
          freq_segment: [
            { required: true, message: '请选择频率段', trigger: 'change' }
          ],
          up_freq_begin: [
            { required: true, message: '请输入上行起始频点', trigger: 'blur' }
          ],
          up_freq_end: [
            { required: true, message: '请输入上行终止频点', trigger: 'blur' }
          ],
          down_freq_begin: [
            { required: true, message: '请输入下行起始频点', trigger: 'blur' }
          ],
          down_freq_end: [
            { required: true, message: '请输入下行终止频点', trigger: 'blur' }
          ],
          power: [
            { required: true, message: '请输入功率', trigger: 'blur' }
          ]
        }
      }
    }
  },
  mounted () {
    let self = this
    self.$store.commit('clearMulticastReceiverList')
    self.$nextTick(() => {
      self.getMuticastFreqSegment()
    })
  },
  methods: {
    async getMuticastFreqSegment () {
      let self = this
      try {
        self.multicastLoading = true
        await self.$store.dispatch('getMulticastFreqSegment')
      } finally {
        self.multicastLoading = false
      }
    },
    handleSpeakerCheckChange (checkData, ifcheck) {
      let self = this
      let selection = self.$refs.selectDeptTree.getCheckedNodes()
      // 根据选择的信息,更新form中的终端信息
      self.setSpeakerCu(checkData, ifcheck)
      // 改变tree的disabled规则,若已经选择了终端,则禁止继续选择,取消任意终端后恢复初始
      if (selection.length >= 1) {
        self.deptTreeProps.disabled = (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else {
            if (data.node_type === 'station') {
              return !selection.find(item => item.id === data.id && item.node_type === 'station')
            } else {
              return !selection.find(item => item.device === data.device)
            }
          }
        }
      } else {
        // 重置checkbox的disabled规则
        self.deptTreeProps.disabled = (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else if (data.node_type === 'station') {
            return data.cus.length !== 1
          } else {
            return !node.isLeaf
          }
        }
      }
    },
    setSpeakerCu (data, check) {
      let self = this
      if (check) {
        // 选择节点时
        let checkCu = ''
        if (data.node_type === 'station') {
          checkCu = data.cus[0]
        } else {
          checkCu = data
        }
        self.multicast.form.speakerSelect = checkCu
      } else {
        // 节点被取消选择时
        self.multicast.form.speakerSelect = null
      }
    },
    async handleMulticastStepChange (operate) {
      let self = this
      if (operate === 'next') {
        self.multicast.nextButtonLoading = true
        if (self.multicast.step === 0) {
          if (!self.multicast.form.speakerSelect) {
            self.$message.error('请选择主讲')
            return
          }
          if (!self.multicast.form.start_time_picker) {
            self.$message.error('请选择开始时间!')
            return
          }
          if (!self.multicast.form.end_time_picker) {
            self.$message.error('请选择结束时间!')
            return
          }
          if (self.multicast.form.start_time_picker.getTime() >= self.multicast.form.end_time_picker.getTime()) {
            self.$message.error('结束时间必须晚于开始时间!')
            return
          }
          self.multicast.form.start_time = service.convertTimeToShow(self.multicast.form.start_time_picker)
          self.multicast.form.end_time = service.convertTimeToShow(self.multicast.form.end_time_picker)
          self.multicast.form.start_time_show = service.convertTimeToShow(self.multicast.form.start_time_picker)
          self.multicast.form.end_time_show = service.convertTimeToShow(self.multicast.form.end_time_picker)
          try {
            await self.$store.dispatch('axios', {
              method: 'post',
              url: `/api/abs/devices/multicast_validated_cu/`,
              data: {
                start_time: self.multicast.form.start_time,
                end_time: self.multicast.form.end_time,
                send_cu: self.multicast.form.speakerSelect.id
              }
            })
            await self.$store.dispatch(`getSatelliteList`)
            self.multicast.satelliteOption = [...self.$store.state.satellite.satelliteList]
          } finally {
            self.multicast.nextButtonLoading = false
          }
        } else if (self.multicast.step === 1) {
          try {
            await self.$refs.multicastStep1Form.validate()
          } catch (e) {
            return
          }
          try {
            let recommended = await self.$store.dispatch('axios', {
              method: 'post',
              url: `/api/abs/devices/recommended_single_freq_segment/`,
              data: {
                start_time: self.multicast.form.start_time,
                end_time: self.multicast.form.end_time,
                send_beam: self.multicast.form.up_beam.id,
                receive_beam: self.multicast.form.down_beam.id,
                speed: self.multicast.form.speed.value,
                cu: self.multicast.form.speakerSelect.id
              }
            })
            self.multicast.transponderOption = recommended.data.transponders
            self.multicast.form.transponder = recommended.data.transponders.find(item => item.id === recommended.data.freq.transponder)
            self.multicast.freq_segmentOption = self.multicast.form.transponder.freq_segments
            self.multicast.form.freq_segment = self.multicast.form.transponder.freq_segments.find(item => item.id === recommended.data.freq.freq_segment)
            self.multicast.form.up_freq_begin = recommended.data.freq.up_freq_begin
            self.multicast.form.up_freq_end = recommended.data.freq.up_freq_end
            self.multicast.form.down_freq_begin = recommended.data.freq.down_freq_begin
            self.multicast.form.down_freq_end = recommended.data.freq.down_freq_end
          } finally {
            self.multicast.nextButtonLoading = false
          }
        }
        self.multicast.step++
      } else if (operate === 'previous') {
        self.multicast.step--
        if (self.multicast.step === 0) {
          if (self.multicast.form.speakerSelect) {
            self.$nextTick(() => {
              self.$refs.selectDeptTree.setCheckedKeys([self.multicast.form.speakerSelect.node_key])
            })
          }
        }
      }
    },
    async handleMulticastSatelliteChange () {
      let self = this
      await self.$store.dispatch(`getBeamOption`, self.multicast.form.satellite.id)
      self.multicast.form.up_beam = null
      self.multicast.form.down_beam = null
      self.multicast.beamOption = [...self.$store.state.beam.beamOption]
    },
    async handleMulticastTransponderChange (val) {
      let self = this
      self.multicast.form.up_freq_begin = ''
      self.multicast.form.up_freq_end = ''
      self.multicast.form.down_freq_begin = ''
      self.multicast.form.down_freq_end = ''
      self.multicast.form.freq_segment = ''
      self.multicast.freq_segmentOption = val.freq_segments
    },
    handleMulticastFreqSegmentChange (val) {
      let self = this
      self.multicast.form.up_freq_begin = val.freq.up_freq_begin
      self.multicast.form.up_freq_end = val.freq.up_freq_end
      self.multicast.form.down_freq_begin = val.freq.down_freq_begin
      self.multicast.form.down_freq_end = val.freq.down_freq_end
    },
    handleMulticastClosed () {
      let self = this
      self.multicast.step = 0
      self.multicast.form.speakerSelect = null
      self.multicast.form.start_time_picker = ''
      self.multicast.form.end_time_picker = ''
      self.multicast.form.satellite = ''
      self.multicast.form.up_beam = ''
      self.multicast.form.down_beam = ''
      self.multicast.form.power = ''
      self.multicast.satelliteOption = []
      self.multicast.beamOption = []
      self.multicast.transponderOption = []
      self.multicast.freq_segmentOption = []
      self.deptTreeProps.disabled = (data, node) => {
        if (data.node_type === 'root' || data.node_type === 'dept') {
          return true
        } else if (data.node_type === 'station') {
          return data.cus.length !== 1
        } else {
          return !node.isLeaf
        }
      }
    },
    async handleMulticastCreate () {
      let self = this
      self.model = 'create'
      self.multicast.speedOption = service.getOptionList(self.$t('message.define.speed'))
      self.multicast.loading = true
      self.multicast.visible = true
      try {
        await self.$store.dispatch('getDeptTreeAll')
      } catch (e) {
        self.multicast.visible = false
      } finally {
        self.multicast.loading = false
      }
    },
    handleMulticastModify () {},
    async handleMulticastDelete (row) {
      let self = this
      try {
        await self.$confirm(`此操作将永久删除该组播资源，是否继续？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        self.$message({
          message: '已取消删除',
          type: 'info'
        })
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/multicast_freq_segment/${row.id}/`
      })
      self.$message({
        message: '组播资源删除成功',
        type: 'success'
      })
      self.$store.commit('clearMulticastReceiverList')
      self.getMuticastFreqSegment()
    },
    async handleMulticastSpeakerClick (row) {
      let self = this
      self.receiver.multicastFreqSegment = row
      await self.$store.dispatch(`getMulticastReceiverList`, row.id)
    },
    handleReceiverCheckChange (data, check) {
      // selectDeptTreeReceiver
      let self = this
      let checkCu = ''
      if (data.node_type === 'station') {
        checkCu = data.cus[0]
      } else {
        checkCu = data
      }
      if (check) {
        // 选择节点时
        self.receiver.form.receivers.push(checkCu)
      } else {
        // 节点被取消选择时
        for (let index in self.receiver.form.receivers) {
          if (self.receiver.form.receivers[index].id === data.id) {
            self.receiver.form.receivers.splice(index, 1)
          }
        }
      }
    },
    handleReceiverClosed () {
      let self = this
      self.receiver.form.receivers = []
    },
    async handleReceiverCreate () {
      let self = this
      if (!self.receiver.multicastFreqSegment) {
        self.$message.error('请先选择组播频率资源!')
        return
      }
      self.receiver.loading = true
      self.receiver.visible = true
      try {
        await self.$store.dispatch('getDeptTreeAll')
      } catch (e) {
        self.receiver.visible = false
        return
      }
      self.receiver.loading = false
      self.receiver.model = 'create'
    },
    async handleReceiverDelete (row) {
      let self = this
      try {
        await self.$confirm(`此操作将永久删除${row.receive_cu_device}听众，是否继续？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        self.$message({
          message: '已取消删除',
          type: 'info'
        })
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/multicast_receiver/${row.id}/`
      })
      self.$message({
        message: '删除成功',
        type: 'success'
      })
      self.$store.dispatch(`getMulticastReceiverList`, self.receiver.multicastFreqSegment.id)
    },
    handleBackPassClosed () {
      let self = this
      self.backPass.step = 0
      self.backPass.form.multicast_receiver = null
      self.backPass.form.multicast_receiver_cu = null
      self.backPass.form.receive_cu_device = null
      self.backPass.form.back_pass_receiver = null
      self.backPass.form.satellite = ''
      self.backPass.form.up_beam = ''
      self.backPass.form.down_beam = ''
      self.backPass.form.transponder = ''
      self.backPass.form.speed = ''
      self.backPass.form.freq_segment = ''
      self.backPass.form.up_freq_begin = ''
      self.backPass.form.up_freq_end = ''
      self.backPass.form.down_freq_begin = ''
      self.backPass.form.down_freq_end = ''
      self.deptTreeProps.disabled = (data, node) => {
        if (data.node_type === 'root' || data.node_type === 'dept') {
          return true
        } else if (data.node_type === 'station') {
          return data.cus.length !== 1
        } else {
          return !node.isLeaf
        }
      }
    },
    handleReceiverBackPass (row) {
      let self = this
      if (!row.back_pass) {
        // 添加回传终端
        self.handleReceiverBackPassCreate(row)
      } else {
        // 弱该听众的回传终端已经存在,则删除回传终端
        self.handleReceiverBackPassDelete(row)
      }
    },
    async handleReceiverBackPassCreate (row) {
      let self = this
      self.backPass.model = 'create'
      self.backPass.speedOption = service.getOptionList(self.$t('message.define.speed'))
      self.backPass.form.multicast_receiver = row.id
      self.backPass.form.multicast_receiver_cu = row.receive_cu
      self.backPass.form.receive_cu_device = row.receive_cu_device
      self.backPass.loading = true
      self.backPass.visible = true
      try {
        await self.$store.dispatch('getDeptTreeAll')
      } catch (e) {
        self.backPass.visible = false
      } finally {
        self.backPass.loading = false
      }
    },
    async handleReceiverBackPassDelete (row) {
      let self = this
      try {
        await self.$confirm(self.$t(`此操作将永久删除${row.back_pass.back_pass_receiver_device}回传终端，是否继续?`), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/multicast_receiver_back_pass/${row.back_pass.id}/`
      })
      self.$message({
        message: self.$t('message.common.info.deleteSuccess'),
        type: 'success'
      })
      self.$store.dispatch(`getMulticastReceiverList`, self.receiver.multicastFreqSegment.id)
    },
    handleBackPassCheckChange (checkData, ifcheck) {
      let self = this
      let selection = self.$refs.selectDeptTreeBackPass.getCheckedNodes()
      // 根据选择的信息,更新form中的终端信息
      self.setBackPassCu(checkData, ifcheck)
      // 改变tree的disabled规则,若已经选择了终端,则禁止继续选择,取消任意终端后恢复初始
      if (selection.length >= 1) {
        self.deptTreeProps.disabled = (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else {
            if (data.node_type === 'station') {
              return !selection.find(item => item.id === data.id && item.node_type === 'station')
            } else {
              return !selection.find(item => item.device === data.device)
            }
          }
        }
      } else {
        // 重置checkbox的disabled规则
        self.deptTreeProps.disabled = (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else if (data.node_type === 'station') {
            return data.cus.length !== 1
          } else {
            return !node.isLeaf
          }
        }
      }
    },
    setBackPassCu (data, check) {
      let self = this
      if (check) {
        // 选择节点时
        let checkCu = ''
        if (data.node_type === 'station') {
          checkCu = data.cus[0]
        } else {
          checkCu = data
        }
        self.backPass.form.back_pass_receiver = checkCu
      } else {
        // 节点被取消选择时
        self.backPass.form.back_pass_receiver = null
      }
    },
    async handleBackPassStepChange (operate) {
      let self = this
      if (operate === 'next') {
        self.backPass.nextButtonLoading = true
        if (self.backPass.step === 0) {
          let startTime = service.convertTimeToShow(new Date(self.receiver.multicastFreqSegment.start_time))
          let endTime = service.convertTimeToShow(new Date(self.receiver.multicastFreqSegment.end_time))
          try {
            await self.$store.dispatch('axios', {
              method: 'post',
              url: `/api/abs/devices/multicast_validated_cu/`,
              data: {
                start_time: startTime,
                end_time: endTime,
                send_cu: self.backPass.form.back_pass_receiver.id
              }
            })
            await self.$store.dispatch(`getSatelliteList`)
            self.backPass.satelliteOption = [...self.$store.state.satellite.satelliteList]
          } finally {
            self.backPass.nextButtonLoading = false
          }
        } else if (self.backPass.step === 1) {
          try {
            await self.$refs.backPassStep1Form.validate()
          } catch (e) {
            self.backPass.nextButtonLoading = false
            return
          }
          let startTime = service.convertTimeToShow(new Date(self.receiver.multicastFreqSegment.start_time))
          let endTime = service.convertTimeToShow(new Date(self.receiver.multicastFreqSegment.end_time))
          try {
            let recommended = await self.$store.dispatch('axios', {
              method: 'post',
              url: `/api/abs/devices/recommended_single_freq_segment/`,
              data: {
                start_time: startTime,
                end_time: endTime,
                send_beam: self.backPass.form.up_beam.id,
                receive_beam: self.backPass.form.down_beam.id,
                speed: self.backPass.form.speed.value,
                cu: self.backPass.form.multicast_receiver_cu
              }
            })
            self.backPass.transponderOption = recommended.data.transponders
            self.backPass.form.transponder = recommended.data.transponders.find(item => item.id === recommended.data.freq.transponder)
            self.backPass.freq_segmentOption = self.backPass.form.transponder.freq_segments
            self.backPass.form.freq_segment = self.backPass.form.transponder.freq_segments.find(item => item.id === recommended.data.freq.freq_segment)
            self.backPass.form.up_freq_begin = recommended.data.freq.up_freq_begin
            self.backPass.form.up_freq_end = recommended.data.freq.up_freq_end
            self.backPass.form.down_freq_begin = recommended.data.freq.down_freq_begin
            self.backPass.form.down_freq_end = recommended.data.freq.down_freq_end
          } finally {
            self.backPass.nextButtonLoading = false
          }
        }
        self.backPass.step++
      } else if (operate === 'previous') {
        self.backPass.step--
        if (self.backPass.step === 0) {
          if (self.backPass.form.back_pass_receiver) {
            self.$nextTick(() => {
              self.$refs.selectDeptTreeBackPass.setCheckedKeys([self.backPass.form.back_pass_receiver.node_key])
            })
          }
        }
      }
    },
    async handleBackPassSatelliteChange () {
      let self = this
      await self.$store.dispatch(`getBeamOption`, self.multicast.form.satellite.id)
      self.backPass.form.up_beam = null
      self.backPass.form.down_beam = null
      self.backPass.beamOption = [...self.$store.state.beam.beamOption]
    },
    handleBackPassTransponderChange (val) {
      let self = this
      self.backPass.form.up_freq_begin = ''
      self.backPass.form.up_freq_end = ''
      self.backPass.form.down_freq_begin = ''
      self.backPass.form.down_freq_end = ''
      self.backPass.form.freq_segment = ''
      self.backPass.freq_segmentOption = val.freq_segments
    },
    handleBackPassFreqSegmentChange (val) {
      let self = this
      self.backPass.form.up_freq_begin = val.freq.up_freq_begin
      self.backPass.form.up_freq_end = val.freq.up_freq_end
      self.backPass.form.down_freq_begin = val.freq.down_freq_begin
      self.backPass.form.down_freq_end = val.freq.down_freq_end
    },
    async submitForm (formName) {
      let self = this
      if (formName === 'multicastForm') {
        self.multicast.submitButtonLoading = true
        try {
          await self.$refs.multicastStep2Form.validate()
        } catch (e) {
          self.multicast.submitButtonLoading = false
          return
        }
        let payload = {
          send_cu: self.multicast.form.speakerSelect.id,
          start_time: self.multicast.form.start_time,
          end_time: self.multicast.form.end_time,
          send_beam: self.multicast.form.up_beam.id,
          receive_beam: self.multicast.form.down_beam.id,
          speed: self.multicast.form.speed.value,
          freq_segment: self.multicast.form.freq_segment.id,
          // up_freq_begin: self.multicast.form.up_freq_begin,
          // up_freq_end: self.multicast.form.up_freq_end,
          down_freq_begin: self.multicast.form.down_freq_begin,
          down_freq_end: self.multicast.form.down_freq_end,
          power: self.multicast.form.power
        }
        try {
          await self.$store.dispatch('axios', {
            method: 'post',
            url: `/api/abs/devices/multicast_freq_segment/`,
            data: payload
          })
        } finally {
          self.multicast.submitButtonLoading = false
        }
        self.multicast.model = ''
        self.multicast.visible = false
        self.$message.success('添加组播成功')
        self.getMuticastFreqSegment()
      }
      if (formName === 'receiverForm') {
        if (self.receiver.form.receivers.length === 0) {
          self.$message.error('未选择听众!')
          return
        }
        self.receiver.submitButtonLoading = true
        try {
          await self.$store.dispatch('axios', {
            method: 'post',
            url: `/api/abs/devices/multicast_receiver_list/`,
            data: {
              multicast_freq_segment: self.receiver.multicastFreqSegment.id,
              receivers: self.receiver.form.receivers.map(item => item.id)
            }
          })
        } finally {
          self.receiver.submitButtonLoading = false
        }
        self.receiver.model = ''
        self.receiver.visible = false
        self.$message.success('添加听众成功')
        self.$store.dispatch(`getMulticastReceiverList`, self.receiver.multicastFreqSegment.id)
      }
      if (formName === 'backPassForm') {
        self.backPass.submitButtonLoading = true
        try {
          await self.$refs.backPassStep2Form.validate()
        } catch (e) {
          self.backPass.submitButtonLoading = false
          return
        }
        let payload = {
          multicast_receiver: self.backPass.form.multicast_receiver,
          back_pass_receiver: self.backPass.form.back_pass_receiver.id,

          freq_segment: self.backPass.form.freq_segment.id,
          up_freq_begin: self.backPass.form.up_freq_begin,
          up_freq_end: self.backPass.form.up_freq_end,
          down_freq_begin: self.backPass.form.down_freq_begin,
          down_freq_end: self.backPass.form.down_freq_end,
          speed: self.backPass.form.speed.value,
          power: self.backPass.form.power
        }
        try {
          await self.$store.dispatch('axios', {
            method: 'post',
            url: `/api/abs/devices/multicast_receiver_back_pass/`,
            data: payload
          })
        } finally {
          self.backPass.submitButtonLoading = false
        }
        self.backPass.model = ''
        self.backPass.visible = false
        self.$message.success('添加回传终端成功')
        self.$store.dispatch(`getMulticastReceiverList`, self.receiver.multicastFreqSegment.id)
      }
    }
  }
}
</script>

<style scoped>
  .multicast-dialog-div-content{
    margin-top: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
  }
  .multicast-dialog-div-content-item1{
    flex: 0 0 300px;
    border-radius: 6px;
  }
  .multicast-dialog-div-content-item2{
    flex: 1 0 490px;
    border-radius: 6px;
  }
  .multicast-dialog-form-header-container{
    border-bottom: solid 1px #e5e5e5;
  }
  .multicast-dialog-form-header{
    font-size: 15px;
    box-sizing: border-box;
    font-weight: bold;
  }

  .multicast-expand-form-label{
    color: #4e6d9d;
    font-weight: bold;
  }
  .multicast-expand-form-item{
    width: calc(25% - 10px);
  }

  .receiver-expand-form-label{
    color: #4e6d9d;
    font-weight: bold;
  }
  .receiver-expand-form-item{
    margin-right: 0;
    width: 50%;
  }
  .el-button-vertical-align-middle{
    vertical-align: middle;
  }
</style>
